<!-- templates/result.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>剪辑结果 - highpre智能AI剪辑</title>
    <link rel="icon" href="static/favicon.svg" type="image/svg+xml">
    <style>
    @font-face {
        font-family: 'MiSans', 'Microsoft YaHei', 'Segoe UI', sans-serif;
        src: url('/static/fonts/MiSans.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    body {
        margin: 0;
        padding: 0;
        background: #000; 
        color: white;
        font-family: 'MiSans', 'Segoe UI', sans-serif;
        height: 100vh;
        overflow: auto;
        position: relative;
    }

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
            repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 255, 255, 0.05) 2px, rgba(0, 255, 255, 0.05) 4px),
            repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 0, 255, 0.05) 2px, rgba(255, 0, 255, 0.05) 4px);
        z-index: 0;
        pointer-events: none;
    }

    /* 页面内容容器 */
    .container {
        padding: 40px 20px;
        min-height: 100vh;
        z-index: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* 视频容器 */
    .video-container {
        width: 100vw;
        height: 100vh;
        background-color: #111;
        border-radius: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        transition: all 0.5s ease;
    }
    /* 16:9 比例 */
    .video-container.video-small {
        width: 800px;
        height: 450px; 
        position: relative;
        margin-top: 20px;
        border-radius: 10px;
        border: 1px solid #00ffff;
    }

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 按钮容器 */
    .button-container {
        display: flex;
        gap: 20px;
        margin-top: 2vh;
        z-index: 20;
        position: relative;
    }

    /* 返回按钮样式 */
    .back-btn {
        background-color: #39dcbb;
        color: #000;
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 30px;
        cursor: pointer;
        font-family: 'MiSans', sans-serif;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .back-btn:hover {
        background-color: #2db09d;
        transform: scale(1.05);
    }

    /* 下一步按钮样式 */
    .next-btn {
        background-color: #39dcbb;
        color: #000;
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        border-radius: 30px;
        cursor: pointer;
        font-family: 'MiSans', sans-serif;
        font-weight: bold;
        margin-top: 20px;
        transition: all 0.3s ease;
        z-index: 20;
        position: relative;
    }

    .next-btn:hover {
        background-color: #2db09d;
        transform: scale(1.05);
    }

    /* 标题样式 */
    h1 {
        color: #39dcbb;
        text-shadow: 0 0 2px #00ffff;
        margin-bottom: 20px;
        z-index: 20;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease;
    }

    h1.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* 卡片容器 */
    .cards-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        width: 90vw;
        margin-top: 30px;
        z-index: 20;
        position: relative;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s ease;
    }

    .cards-container.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* 卡片样式 */
    .card {
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 10px;
        padding: 1vw;
        width: 13vw;
        box-shadow: 0 0 10px #00ffff;
        transition: transform 0.2s ease;
        border: 1px solid #00ffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .card:hover {
        transform: scale(1.02);
    }

    .card h3 {
        margin-top: 0;
        color: #39dcbb;
        text-align: center;
        width: 100%;
    }

    .card label {
        display: block;
        margin: 10px 0 5px;
        text-align: center;
        width: 100%;
    }

    .card input,
    .card select {
        width: 100%;
        padding: 8px;
        border-radius: 5px;
        border: 1px solid #00ffff;
        background-color: #333;
        color: white;
        box-sizing: border-box;
    }

    .card button {
        margin-top: 1vh;
        width: 100%;
        padding: 10px;
        background-color: #39dcbb;
        color: #000;
        border: none;
        border-radius: 30px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

    .card button:hover {
        background-color: #2db09d;
        transform: scale(1.05);
    }

    /* 复选框样式 */
    .checkbox-container {
        display: flex;
        align-items: center;
        margin: 10px 0;
        width: 100%;
    }

    .checkbox-container input[type="checkbox"] {
        width: auto;
        margin-right: 8px;
    }

    /* 旋钮样式 */
    .knob-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 15px 0;
    }

    .knob {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #333;
        border: 2px solid #00ffff;
        position: relative;
        cursor: pointer;
        box-shadow: 0 0 10px #00ffff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .knob::before {
        content: "";
        position: absolute;
        width: 4px;
        height: 25px;
        background: #00ffff;
        top: 5px;
        transform-origin: bottom center;
        border-radius: 2px;
    }

    .knob-value {
        color: white;
        font-size: 12px;
        text-align: center;
    }

    /* 时间输入容器 */
    .time-input-container {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 5px 0;
    }

    .time-input-container label {
        width: auto;
        margin: 0 5px 0 0;
        text-align: left;
    }

    .time-input-container input {
        flex: 1;
        margin: 0 2px;
    }

    .colon {
        margin: 0 2px;
        font-weight: bold;
    }
    
    /* 错误信息样式 */
    .error-message {
        color: #ff6b6b;
        background-color: rgba(255, 0, 0, 0.1);
        border: 1px solid #ff6b6b;
        border-radius: 5px;
        padding: 10px;
        margin: 10px 0;
        text-align: center;
        font-family: monospace;
        font-size: 14px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
</style>
</head>
<body>
    <div class="container">
        <h1 id="pageTitle">视频处理中心</h1>

        <div class="video-container" id="videoContainer">
            <video id="resultVideo" controls autoplay></video>
        </div>

        <button class="next-btn" id="nextBtn">下一步</button>

        <div class="cards-container" id="cardsContainer">
            <!-- 视频抽帧 -->
            <div class="card">
                <h3>视频抽帧</h3>
                <label>帧率 (fps)</label>
                <input type="number" min="1" value="1" class="param-fps">
                <label>输出路径</label>
                <input type="text" value="frames/frame_%04d.png" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('extract_frames', this)">开始处理</button>
            </div>

            <!-- 转换格式 -->
            <div class="card">
                <h3>转换格式</h3>
                <label>目标格式</label>
                <select class="param-format">
                    <option value="mp4">MP4</option>
                    <option value="avi">AVI</option>
                    <option value="mkv">MKV</option>
                    <option value="mov">MOV</option>
                    <option value="wmv">WMV</option>
                    <option value="flv">FLV</option>
                    <option value="webm">WebM</option>
                    <option value="m4v">M4V</option>
                </select>
                <label>输出路径</label>
                <input type="text" value="output/output.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('convert_format', this)">开始处理</button>
            </div>

            <!-- 修改分辨率 -->
            <div class="card">
                <h3>修改分辨率</h3>
                <label>宽度</label>
                <input type="number" min="100" value="640" class="param-width">
                <label>高度</label>
                <input type="number" min="100" value="360" class="param-height">
                <div class="checkbox-container">
                    <input type="checkbox" class="param-keep-ratio" checked>
                    <label>保持宽高比</label>
                </div>
                <label>输出路径</label>
                <input type="text" value="output/resized_video.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('resize_video', this)">开始处理</button>
            </div>

            <!-- 裁剪视频 -->
            <div class="card">
                <h3>裁剪视频</h3>
                <div class="time-input-container">
                    <label>开始:</label>
                    <input type="number" min="0" step="1" value="0" placeholder="时" class="param-start-h">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="分" class="param-start-m">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="秒" class="param-start-s">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="999" step="1" value="0" placeholder="毫秒" class="param-start-ms">
                </div>
                <div class="time-input-container">
                    <label>结束:</label>
                    <input type="number" min="0" step="1" value="0" placeholder="时" class="param-end-h">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="分" class="param-end-m">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="10" placeholder="秒" class="param-end-s">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="999" step="1" value="0" placeholder="毫秒" class="param-end-ms">
                </div>
                <label>输出路径</label>
                <input type="text" value="output/trimmed_video.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('trim_video', this)">开始处理</button>
            </div>

            <!-- 分离音频 -->
            <div class="card">
                <h3>分离音频</h3>
                <label>输出格式</label>
                <select class="param-audio-format">
                    <option value="mp3">MP3</option>
                    <option value="aac">AAC</option>
                    <option value="wav">WAV</option>
                    <option value="flac">FLAC</option>
                    <option value="ogg">OGG</option>
                </select>
                <label>输出路径</label>
                <input type="text" value="output/audio.mp3" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('extract_audio', this)">开始处理</button>
            </div>

            <!-- 提取 GIF -->
            <div class="card">
                <h3>提取 GIF</h3>
                <div class="time-input-container">
                    <label>开始:</label>
                    <input type="number" min="0" step="1" value="0" placeholder="时" class="param-start-h">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="分" class="param-start-m">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="秒" class="param-start-s">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="999" step="1" value="0" placeholder="毫秒" class="param-start-ms">
                </div>
                <div class="time-input-container">
                    <label>结束:</label>
                    <input type="number" min="0" step="1" value="0" placeholder="时" class="param-end-h">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="0" placeholder="分" class="param-end-m">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="59" step="1" value="5" placeholder="秒" class="param-end-s">
                    <span class="colon">:</span>
                    <input type="number" min="0" max="999" step="1" value="0" placeholder="毫秒" class="param-end-ms">
                </div>
                <label>输出路径</label>
                <input type="text" value="output/clip.gif" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('extract_gif', this)">开始处理</button>
            </div>

            <!-- 调整码率 -->
            <div class="card">
                <h3>调整码率</h3>
                <label>码率 (kb/s)</label>
                <input type="number" min="100" value="1024" class="param-bitrate">
                <label>输出路径</label>
                <input type="text" value="output/bitrate_adjusted.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('adjust_bitrate', this)">开始处理</button>
            </div>

            <!-- 添加水印 -->
            <div class="card">
                <h3>添加水印</h3>
                <label>水印图片位置</label>
                <select class="param-position">
                    <option value="top_left">左上</option>
                    <option value="top_right">右上</option>
                    <option value="bottom_left">左下</option>
                    <option value="bottom_right">右下</option>
                    <option value="center">居中</option>
                </select>
                <label>水印图片路径</label>
                <input type="text" value="watermark.png" class="param-watermark-path">
                <label>输出路径</label>
                <input type="text" value="output/watermarked_video.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('add_watermark', this)">开始处理</button>
            </div>

            <!-- 合并视频 -->
            <div class="card">
                <h3>合并视频</h3>
                <label>视频1路径</label>
                <input type="text" value="video1.mp4" class="param-video1">
                <label>视频2路径</label>
                <input type="text" value="video2.mp4" class="param-video2">
                <label>输出路径</label>
                <input type="text" value="output/merged_video.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('concat_videos', this)">开始处理</button>
            </div>

            <!-- 调整音量 -->
            <div class="card">
                <h3>调整音量</h3>
                <div class="knob-container">
                    <div class="knob" id="volumeKnob"></div>
                    <div class="knob-value" id="volumeValue">1.0</div>
                </div>
                <input type="hidden" class="param-volume" value="1.0">
                <label>输出路径</label>
                <input type="text" value="output/volume_adjusted.mp4" class="param-output">
                <div class="error-message"></div>
                <button onclick="processVideo('adjust_volume', this)">开始处理</button>
            </div>
        </div>

        <div class="button-container">
            <button class="back-btn" onclick="window.location.href='/'">返回主页</button>
            <button class="back-btn" onclick="window.location.href='/history'">历史记录</button>
        </div>
    </div>

    <script>
        const videoElement = document.getElementById('resultVideo');
        const videoContainer = document.getElementById('videoContainer');
        const nextBtn = document.getElementById('nextBtn');
        const cardsContainer = document.getElementById('cardsContainer');
        const pageTitle = document.getElementById('pageTitle');
        
        // 获取视频路径
        function getVideoPath() {
            // 待开发
            return '/videos/output/cut_test.mp4';
        }
        
        videoElement.src = getVideoPath();

        //动画
        nextBtn.addEventListener('click', function() {
            videoContainer.classList.add('video-small');
            
            setTimeout(() => {
                pageTitle.classList.add('show');
                cardsContainer.classList.add('show');
            }, 300);
            
            nextBtn.style.display = 'none';
        });

        // 初始化音量旋钮
        document.addEventListener('DOMContentLoaded', function() {
            const knob = document.getElementById('volumeKnob');
            const knobValue = document.getElementById('volumeValue');
            const volumeInput = document.querySelector('.param-volume');
            let isDragging = false;
            let startY = 0;
            let startValue = 1.0;
            const sensitivity = 0.02;

            // 设置初始旋钮角度
            updateKnob(1.0);

            knob.addEventListener('mousedown', function(e) {
                e.preventDefault(); 
                isDragging = true;
                startY = e.clientY;
                startValue = parseFloat(volumeInput.value);
                knob.style.cursor = 'grabbing';
            });

            document.addEventListener('mousemove', function(e) {
                if (isDragging) {
                    e.preventDefault(); 
                    const deltaY = startY - e.clientY; 
                    let newValue = startValue + deltaY * sensitivity;
                    newValue = Math.min(3.0, Math.max(0.0, newValue)); 
                    updateKnob(newValue);
                }
            });

            document.addEventListener('mouseup', function() {
                if (isDragging) {
                    isDragging = false;
                    knob.style.cursor = 'grab';
                }
            });

            document.addEventListener('mouseleave', function() {
                if (isDragging) {
                    isDragging = false;
                    knob.style.cursor = 'grab';
                }
            });

            function updateKnob(value) {
                volumeInput.value = value.toFixed(1);
                knobValue.textContent = value.toFixed(1);
                const rotation = (value * 120) + 180; 
                knob.style.transform = `rotate(${rotation}deg)`;
            }
        });

        function processVideo(action, buttonElement) {
            const card = buttonElement.closest('.card');
            const errorMessage = card.querySelector('.error-message');
            errorMessage.style.display = 'none';
            
            const videoPath = getVideoPath();
            let params = {};
            
            switch (action) {
                case 'extract_frames':
                    params.fps = card.querySelector('.param-fps').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'convert_format':
                    params.format = card.querySelector('.param-format').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'resize_video':
                    params.width = card.querySelector('.param-width').value;
                    params.height = card.querySelector('.param-height').value;
                    params.keep_ratio = card.querySelector('.param-keep-ratio').checked;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'trim_video':
                    const startH = parseInt(card.querySelector('.param-start-h').value) || 0;
                    const startM = parseInt(card.querySelector('.param-start-m').value) || 0;
                    const startS = parseInt(card.querySelector('.param-start-s').value) || 0;
                    const startMs = parseInt(card.querySelector('.param-start-ms').value) || 0;
                    const endH = parseInt(card.querySelector('.param-end-h').value) || 0;
                    const endM = parseInt(card.querySelector('.param-end-m').value) || 0;
                    const endS = parseInt(card.querySelector('.param-end-s').value) || 0;
                    const endMs = parseInt(card.querySelector('.param-end-ms').value) || 0;
                    
                    params.start = startH * 3600 + startM * 60 + startS + startMs / 1000;
                    params.end = endH * 3600 + endM * 60 + endS + endMs / 1000;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'extract_audio':
                    params.format = card.querySelector('.param-audio-format').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'extract_gif':
                    const gifStartH = parseInt(card.querySelector('.param-start-h').value) || 0;
                    const gifStartM = parseInt(card.querySelector('.param-start-m').value) || 0;
                    const gifStartS = parseInt(card.querySelector('.param-start-s').value) || 0;
                    const gifStartMs = parseInt(card.querySelector('.param-start-ms').value) || 0;
                    const gifEndH = parseInt(card.querySelector('.param-end-h').value) || 0;
                    const gifEndM = parseInt(card.querySelector('.param-end-m').value) || 0;
                    const gifEndS = parseInt(card.querySelector('.param-end-s').value) || 0;
                    const gifEndMs = parseInt(card.querySelector('.param-end-ms').value) || 0;
                    
                    params.start = gifStartH * 3600 + gifStartM * 60 + gifStartS + gifStartMs / 1000;
                    params.end = gifEndH * 3600 + gifEndM * 60 + gifEndS + gifEndMs / 1000;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'adjust_bitrate':
                    params.bitrate = card.querySelector('.param-bitrate').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'add_watermark':
                    params.position = card.querySelector('.param-position').value;
                    params.watermark_path = card.querySelector('.param-watermark-path').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'concat_videos':
                    params.video1 = card.querySelector('.param-video1').value;
                    params.video2 = card.querySelector('.param-video2').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
                case 'adjust_volume':
                    params.volume = card.querySelector('.param-volume').value;
                    params.output = card.querySelector('.param-output').value;
                    break;
            }

            fetch('/process_video', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    action: action,
                    video_path: videoPath,
                    params: params
                })
            })
            .then(res => {
                if (!res.ok) {
                    throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.json();
            })
            .then(data => {
                if (data.code === 0) {
                    const outputPath = data.output_path || data.data?.output_path;
                    if (outputPath) {
                        alert('处理成功！输出路径：' + outputPath);
                    } else {
                        alert('处理成功！但未返回输出路径');
                    }
                } else {
                    errorMessage.textContent = data.message || '处理失败';
                    errorMessage.style.display = 'block';
                }
            })
            .catch(err => {
                errorMessage.textContent = '处理失败：' + err.message;
                errorMessage.style.display = 'block';
            });
        }
    </script>
</body>
</html>